<nz-card>
  <form (submit)="submitForm()" [formGroup]="passwordChangeForm" [nzLayout]="'vertical'" nz-form>
    <nz-form-item>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="'请输入您的旧密码!'">
        <nz-form-label nzRequired>当前密码</nz-form-label>
        <nz-input-group [nzSuffix]="suffixTemplateOld">
          <input [type]="oldPasswordVisible ? 'text' : 'password'" autocomplete="off" [formControlName]="'password'"
                 nz-input
                 placeholder="请输入您的当前密码"/>
        </nz-input-group>
        <ng-template #suffixTemplateOld>
        <span (click)="oldPasswordVisible = !oldPasswordVisible" [nzType]="oldPasswordVisible ? 'eye-invisible' : 'eye'"
              nz-icon></span>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="'请输入您的新密码!'">
        <nz-form-label nzRequired>新密码</nz-form-label>
        <nz-input-group [nzSuffix]="suffixTemplateNew">
          <input [type]="newPasswordVisible ? 'text' : 'password'" autocomplete="off"
                 [formControlName]="'new_password'"
                 nz-input placeholder="新密码"/>
        </nz-input-group>
        <ng-template #suffixTemplateNew>
        <span (click)="newPasswordVisible = !newPasswordVisible" [nzType]="newPasswordVisible ? 'eye-invisible' : 'eye'"
              nz-icon></span>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item class="mb-2">
      <nz-form-control [nzErrorTip]="
            passwordChangeForm
              .get('confirm_password')?.hasError('passwordMismatch')
              ? '密码不匹配!'
              : '请确认您的新密码!'
          " [nzSm]="14" [nzXs]="24">
        <nz-form-label nzRequired>确认新密码</nz-form-label>
        <nz-input-group [nzSuffix]="suffixTemplateConfirm">
          <input [type]="confirmPasswordVisible ? 'text' : 'password'"
                 autocomplete="off" [formControlName]="'confirm_password'"
                 nz-input placeholder="确认新密码"/>
        </nz-input-group>
        <ng-template #suffixTemplateConfirm>
        <span (click)="confirmPasswordVisible = !confirmPasswordVisible"
              [nzType]="confirmPasswordVisible ? 'eye-invisible' : 'eye'"
              nz-icon></span>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item class="mb-2">
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <span nz-typography class="d-block" [nzType]="'secondary'"
              style="font-size: 12px;">新密码应为{{passwordPolicy | lowercase}}</span>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control>
        <button nz-button nzType="primary" type="submit">
          更新
        </button>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-card>
